<template>
  <div class="Bur_Alarm">
    <div class="Bur_AlarmImg"></div>
    <div class="Bur_Alarmcontent">
      <div class="Bur_AlarmInfo">
        <progressBar :params="params"></progressBar>
      </div>
      <div class="Bur_AlarmInfoType">
        <div class="Bur_AlarmInfoTypeTop">
          <div class="Bur_AlarmTopLeft">
            <span>公共区域</span>
            <div class="Bur_AlarmTopLeftImg"></div>
          </div>

          <div class="Bur_AlarmTopMiddle">
            <span>办公区域</span>
            <div class="Bur_AlarmTopMiddleImg"></div>
          </div>
          <div class="Bur_AlarmTopRight">
            <span>停车场</span>
            <div class="Bur_AlarmTopRightImg"></div>
          </div>
        </div>
        <div class="Bur_AlarmInfoTypeBottom">
          <div class="Bur_AlarmText">
            <div class="Bur_AlarmTextzs">
              总数
              <span>{{burglarStatus.public.total}}</span>
            </div>
            <div class="Bur_AlarmTextgzs">
              故障数
              <span>{{burglarStatus.public.fault}}</span>
            </div>
          </div>
          <div class="Bur_AlarmText">
            <div class="Bur_AlarmTextzs">
              总数
              <span>{{burglarStatus.work.total}}</span>
            </div>
            <div class="Bur_AlarmTextgzs">
              故障数
              <span>{{burglarStatus.work.fault}}</span>
            </div>
          </div>
          <div class="Bur_AlarmText">
            <div class="Bur_AlarmTextzs">
              总数
              <span>{{burglarStatus.parking.total}}</span>
            </div>
            <div class="Bur_AlarmTextgzs">
              故障数
              <span>{{burglarStatus.parking.fault}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import progressBar from "../../../common/progressBar.vue";
export default {
  components: {
    progressBar,
  },
  data() {
    return {
      burglarStatus: {
        public: {
          total: 0,
          fault: 0,
        },
        work: {
          total: 0,
          fault: 0,
        },
        parking: {
          total: 0,
          fault: 0,
        },
      },
      params: {
        leftBottomValue: "报警", //左上文字
        leftTopValue: 21, //左侧数字
        rightBottomValue: "总数", // 右侧文字
        rightTopValue: 50, // 右侧数字
        middleTopText: "", // 中间文字
        middleTopValue: "", // 中间总数
        leftNumberColor: "#F5C723", // 左侧数字颜色
        rightNumberColor: "#ffffff", // 右侧数字颜色
        activeColor: "#F5C723",
      },
    };
  },
  sockets: {
    sendAqInvadeStatus(data) {
      let aqInvadeInfo = JSON.parse(data);
      this.params.leftTopValue = parseInt(aqInvadeInfo.alarmsNumber);
      this.params.rightTopValue = parseInt(aqInvadeInfo.totalNumber);
      try {
        this.burglarStatus.public.total = aqInvadeInfo.region[0].total;
        this.burglarStatus.public.fault = aqInvadeInfo.region[0].fault;
        this.burglarStatus.work.total = aqInvadeInfo.region[1].total;
        this.burglarStatus.work.fault = aqInvadeInfo.region[1].fault;
        this.burglarStatus.parking.total = aqInvadeInfo.region[2].total;
        this.burglarStatus.parking.fault = aqInvadeInfo.region[2].fault;
      } catch (e) {}
    },
  },
};
</script>

<style>
.Bur_Alarm {
  width: 100%;
  height: 24%;
  margin-top: 110px;
}
.Bur_Alarm .Bur_AlarmImg {
  width: 732px;
  height: 65px;
  background: url("../../../../../static/images/safety/防盗报警.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 10px;
}
.Bur_Alarmcontent {
  width: 100%;
  height: calc(100% - 112px);
}
.Bur_AlarmInfo {
  width: 100%;
  height: 120px;
}
.Bur_AlarmInfoType {
  width: 100%;
  height: calc(100% - 120px);
}
.Bur_AlarmInfoTypeTop {
  width: 90%;
  height: 50%;
  margin-left: 50px;
  display: flex;
}
.Bur_AlarmInfoTypeBottom {
  width: 90%;
  height: 18%;
  margin-left: 50px;
  display: flex;
  margin-top: 60px;
}
.Bur_AlarmTopLeft {
  width: 174px;
  height: 200px;
  background: url("../../../../../static/images/safety/公共区域2.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-left: 30px;
}
.Bur_AlarmTopLeftImg {
  width: 66px;
  height: 66px;
  background: url("../../../../../static/images/safety/公共区域3.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-left: 53px;
  margin-top: -30px;
}
.Bur_AlarmTopLeft > span {
  font-size: 25px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #42c5fc;
  line-height: 120px;
  margin-left: 40px;
}
.Bur_AlarmTopMiddle {
  width: 174px;
  height: 200px;
  background: url("../../../../../static/images/safety/办公区域2.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0 100px;
}
.Bur_AlarmTopMiddleImg {
  width: 66px;
  height: 66px;
  background: url("../../../../../static/images/safety/办公区域3.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-left: 53px;
  margin-top: -30px;
}
.Bur_AlarmTopMiddle > span {
  font-size: 25px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #00eaffff;
  line-height: 120px;
  margin-left: 40px;
}
.Bur_AlarmTopRight {
  width: 174px;
  height: 200px;
  background: url("../../../../../static/images/safety/停车场2.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.Bur_AlarmTopRightImg {
  width: 66px;
  height: 66px;
  background: url("../../../../../static/images/safety/停车场3.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-left: 53px;
  margin-top: -30px;
}
.Bur_AlarmTopRight > span {
  font-size: 25px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffd700;
  line-height: 120px;
  margin-left: 50px;
}
.Bur_AlarmText {
  width: 31%;
  height: 50%;
  display: flex;
  margin: 0 3px;
}
.Bur_AlarmTextzs {
  font-size: 23px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #b4e0f0;
  margin-left: 30px;
  width: 190px;
  height: 50px;
  margin-top: 19px;
}
.Bur_AlarmTextzs > span {
  font-size: 29px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #3dcf40;
  margin-left: 10px;
  line-height: -1px;
}
.Bur_AlarmTextgzs {
  font-size: 23px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #b4e0f0;
  width: 190px;
  height: 50px;
  margin-top: 21px;
}
.Bur_AlarmTextgzs > span {
  font-size: 29px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #e63c3c;
  margin-left: 20px;
}
</style>
